<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="商品详情" left-arrow @click-left="$router.back()" />
    </div>
    <div class="content">
      <div><img :src="detailInfo.image" alt=""  style="width:100%;" /></div>
      <div>
        {{ detailInfo.title }}
      </div>
      <div>￥{{ detailInfo.price }}</div>
    </div>

    <van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" dot />
  <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.totalCount"   @click="$router.push('/cart')"/>
  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
  <van-action-bar-button type="warning" text="加入购物车"  @click="addCart"/>
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
  </div>
</template>

<script setup>
import request from '@/utils/request'
import {useCounterStore} from '@/stores/counter'
const store =useCounterStore()
import {ref,onMounted} from 'vue'
import {useRoute} from 'vue-router'
const route=useRoute()
const detailInfo =  ref({})
onMounted(()=>{
   request.get('/detail',{
    params:{
        id:route.params.id
    }
   }).then(res=>{
    if(res.data.code==200)
    {
        detailInfo.value=res.data.data
    }
   })
})

const addCart=()=>{
    store.addItem(detailInfo.value)
}
</script>

<style lang="scss" scoped>
</style>